import React, { useState, useRef, useEffect } from 'react';
import { Modal, Form } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
const SelectAccount = (props) => {
  const { loading, organizationAuthAdminList, visible = {}, onClose, onOk, disabledList = [] } = props;
  const { show = false, details = [] } = visible;
  const childRef = useRef();
  const modalProps = {
    title: `添加助教`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    zIndex: 1001,
    okText: '确认',
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    type: 'checkedBox',
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    getCheckboxProps: (record) => {
      return {
        disabled: disabledList.map(item => { return item.id }).includes(record.id), // 如果行数据的key在disabledRows数组中，禁用复选框
      };
    },
    preserveSelectedRowKeys: true,
  };
  useEffect(() => {
    if (show) {
      setSelectedRowKeys(details);
    } else {
      setSelectedRowKeys([]);
    }
  }, [show]);
  // 搜索参数
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };

  const searchItems = [
    {
      label: '用户姓名或手机',
      name: 'keyword',
    },
  ];
  // table 表头
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '头像',
      dataIndex: 'profile',
      render: (e) => {
        return <PopImgShow width={24} url={e}></PopImgShow>;
      },
    },
  ];
  return (
    <>
      <Modal
        {...modalProps}
        onCancel={onClose}
        onOk={() => {
          onOk && onOk(selectedRowKeys);
          onClose();
        }}
      >
        <TableDataBlock
          rowSelection={rowSelection}
          cRef={childRef}
          loading={loading}
          searchItems={searchItems}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          dispatchType="system/fetchSearchAdmin"
          {...organizationAuthAdminList}
        ></TableDataBlock>
      </Modal>
    </>
  );
};

export default connect(({ loading, system }) => ({
  loading: loading.models.system,
  organizationAuthAdminList: system.organizationAuthAdminList,
}))(SelectAccount);
